<div *ngIf="jobs" class="mat-elevation-z8 mt12">
  <div class="conditions">
    <form *ngFor="let condition of searchConditions; let conditionI = index" (submit)="false" class="conditionsForm">
      <div
        *ngIf="searchConditions.length > 0"
        class="remove">
        <button
          (click)="searchConditions.splice(conditionI, 1); saveSearchState()"
          mat-icon-button color="warn">
          <mat-icon>delete_forever</mat-icon>
        </button>
      </div>

      <mat-form-field
        class="field"
        [floatLabel]="'never'">
        <mat-select
          [name]="'field'"
          [(ngModel)]="condition.field"
          (selectionChange)="conditionFieldChanged(condition); saveSearchState()"
          placeholder="search field">
          <mat-option *ngFor="let field of searchFields" [value]="field">{{field.key}}</mat-option>
        </mat-select>
      </mat-form-field>

      <ng-container *ngIf="condition.field?.type == 'select'">
        <mat-form-field
          class="value"
          [floatLabel]="'never'">
          <mat-select
            [name]="'value'"
            [(ngModel)]="condition.value" placeholder="value"
            (selectionChange)="saveSearchState()">
            <mat-option *ngFor="let option of condition.field.options" [value]="option">{{option.key || option}}</mat-option>
          </mat-select>
        </mat-form-field>
      </ng-container>
      <ng-container *ngIf="condition.field?.type != 'select'">
        <mat-form-field
          class="operator"
          [floatLabel]="'never'">
          <mat-select
            [name]="'operator'"
            [(ngModel)]="condition.operator"
            (selectionChange)="saveSearchState()"
            placeholder="operator">
            <ng-container *ngFor="let operator of operators">
              <mat-option *ngIf="operator.types.indexOf(condition.field?.type) > -1" [value]="operator">{{operator.label}}</mat-option>
            </ng-container>
          </mat-select>
        </mat-form-field>

        <mat-form-field
          *ngIf="condition.field?.type == 'date'"
          class="value date"
          [floatLabel]="'never'">
          <mat-datepicker-toggle matPrefix [for]="picker"></mat-datepicker-toggle>
          <input
            name="value"
            [(ngModel)]="condition.value"
            (change)="saveSearchState()"
            matInput [matDatepicker]="picker" class="date" placeholder="choose a date">
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>
        <mat-form-field
          *ngIf="condition.field?.type != 'date'"
          class="value"
          [floatLabel]="'never'">
          <input
            name="value"
            [(ngModel)]="condition.value"
            (change)="saveSearchState()"
            matInput [type]="condition.field?.type" placeholder="value">
        </mat-form-field>

      </ng-container>
    </form>
    <form class="conditionsForm pt12">
      <div
        class="add">
        <button
          (click)="searchConditions.push({}); saveSearchState()"
          mat-icon-button color="primary">
          <mat-icon>add_box</mat-icon>
        </button>
      </div>
      <div class="textBtnWrapper">
        <button
          (click)="search()"
          mat-button color="primary">Search</button>
      </div>
      <div class="textBtnWrapper">
        <button
          (click)="delete()"
          mat-button color="warn">Delete</button>
      </div>
    </form>
  </div>

  <table mat-table [dataSource]="jobs">

    <ng-container *ngFor="let col of displayedColumns" [matColumnDef]="col">
      <th mat-header-cell *matHeaderCellDef>{{col}}</th>
      <td mat-cell *matCellDef="let job;">
        <ng-container [ngSwitch]="col">
          <a *ngSwitchCase="'url'" [href]="job[col]" class="url" target="_blank">{{job[col]}}</a>
          <a *ngSwitchCase="'_id'" (click)="jobDetail(job[col])" class="url">{{job[col]}}</a>
          <a *ngSwitchCase="'parentId'" (click)="jobDetail(job[col])" class="url">{{job[col]}}</a>
          <ng-container *ngSwitchCase="'createTime'">{{job[col] | longToDateStr}}</ng-container>
          <ng-container *ngSwitchDefault>{{job[col]}}</ng-container>
        </ng-container>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator
    [pageSizeOptions]="[10, 15, 20, 50]"
    [length]="curPageInfo.total"
    [pageIndex]="curPageInfo.pageIndex"
    [pageSize]="curPageInfo.pageSize"
    (page)="curPageInfo.pageIndex = $event.pageIndex; curPageInfo.pageSize = $event.pageSize; saveSearchState(); search()"
    [showFirstLastButtons]="true"
  ></mat-paginator>
</div>
